<template>
  <div>
    <el-form ref="form" :model="formModel" :label-width="'200px'" :rules="rules" label-position="left">
      <el-form-item label="Template Name:">
        <span class="email-template-key">{{formModel.emailTempalteKey}}</span>
      </el-form-item>
      <template v-for="item in formItem">
        <el-form-item :label="item.name" :key="item.name" :size="'small'" class="form-item"
                      :prop="item.prop">
          <el-input v-model="formModel[item.prop]"></el-input>
        </el-form-item>
      </template>
      <el-form-item label="Content:">
        <vue-editor :editorToolbar="customToolbar" v-model="formModel.content"></vue-editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      formItem: [
        {name: 'Template Description:', prop: 'description'},
        {name: 'From:', prop: 'sendFrom'},
        {name: 'To:', prop: 'sendTo'},
        {name: 'CC:', prop: 'emailCC'},
        {name: 'BCC:', prop: 'emailBCC'},
        {name: 'Subject:', prop: 'subject'}
      ],
      formModel: {},
      rules: {
        sendFrom: [
          { required: true, trigger: 'blur' }
        ]
      },
      customToolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{'align': ''}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],
        [{'color': []}, {'background': []}],
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'header': [false, 1, 2, 3, 4, 5, 6]}, {'font': []}]
      ]
    }
  },
  methods: {
    setFormModel(formModel) {
      this.formModel = formModel
      this.$nextTick(() => this.$refs['form'].clearValidate())
    },
    getFormModel() {
      return this.formModel
    },
    validateForm(fn) {
      return this.$refs['form'].validate()
    }
  }
}
</script>

<style scoped>
  .edit-vue-class {
    padding-left: 200px;
  }
  .email-template-key{
    font-size:medium;
  }
</style>
